<template>
  <div class="home">
    <div class="title-bar">
      <console-header :env="env" :supportPools="supportPools" :refresh-callback="refreshCallback" ></console-header>
      <!-- <order-header v-else :env="env" :supportPools="supportPools"></order-header> -->
    </div>
    <div style="margin-bottom:50px"></div>
    <div class="content">
      <div class="status">
        <div class="img">
          <img src="../../assets/notopened/notopened.png" alt="">
        </div>
        <p class="content-text">当前暂无任何数据</p>
        <p class="tip">您还没有开通云桌面服务，请先订购云桌面后再使用云桌面管理功能</p>
        <el-button type="primary" @click="orderButton">立即前往订购</el-button>
      </div>
    </div>
  </div> 
</template>

<script lang="ts">

import Vue from 'vue'
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
export default Vue.extend({
  props: {
    supportPools: {
      type: Array,
      default: function () {
        return [];
      },
    },
    env: {
      type: String,
      default: () => {
      const host = window.location.host;
      let env = "prod";
      if (host.includes('ecloud.10086.cn')) {
        switch(host) {
          case 'ecloud.10086.cn:31015':
            env = 'test'
            break
          case 'ecloud.10086.cn:31008':
            env = 'dev'
            break
          case 'ecloud.10086.cn':
            env = 'prod'
            break
          default:
            env = 'prod'
        }
      }
      if (host.includes('desktop-management.cmecloud.cn')) {
        switch(host) {
          case 'desktop-management.cmecloud.cn:8443':
            env = 'test'
            break;
        }
      }
      return env;
    }
    },
    refreshCallback: {
      type: Function,
      default: null,
    },

  },
  data() {
    return {
    }
	},
  methods: {
    orderButton() {
      window.location.href=`${ this.$url_prefix }/home/product-introduction/cloudDesk`
    }
  }
})
</script>

<style lang="scss" scoped>
.home {
    width: 100vw;
    height: 100%;
    background-color: #EFF1F4;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .title-bar {
    flex-shrink: 0;
  }

  .navbar {
    width: 100%;
    height: 60px;
    background-color: #fff;
    padding: 0 1.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .navbar-title {
      height: 60px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #031129;
      letter-spacing: 0;
      text-align: justify;
      line-height: 60px;
      font-weight: 400;
    }

    .navbar-right {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #999999;

      p {
        padding: 0;
        margin: 0;
      }

      .product_detail {
        margin-right: 56px !important;
      }
    }
  }

    .content {
      width: 100%;
      height: calc(100% - 40px);
      padding: 20px;
      flex-grow: 1;
      overflow-y: auto;

      .status {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .approve {
          min-width: 80px;
          border: 0;
          width: max-content;
          height: 32px;
          background: #337DFF;
          border-radius: 2px;
          font-family: Helvetica;
          font-size: 12px;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 32px;
          font-weight: 400;
        }

        .img {
          width: 450px;
          height: 300px;
          img {
            width: 100%;
          }
        }

        p {
          margin: 0; padding: 0;
        }

        .content-text {
          font-family: PingFangSC-Semibold;
          font-size: 18px;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
          font-weight: 600;
          margin: 5px 0 20px 0;
        }

        .tip {
          width: max-content;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #555555;
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
          margin-bottom: 22px;
        }
        ::v-deep .el-button{
          border-radius: 2px;
        }

        .common {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
        }
      }
    }
  }
</style>
